<template>
  <div class="content-block">
    <div class="info-head">{{ title }}</div>
    <div class="info-content" style="padding: 20px;">
      <el-table
        class="table" :data="info" height="auto"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'grid-item-five',
  props: {
    title: String,
    info: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return [
          { label: '行业名称', prop: 'industry' },
          { label: '能源消费总量（万吨标准煤）', prop: 'total' },
          { label: '同比', prop: 'totalGrowth' },
          { label: '工业用电（亿千瓦时）', prop: 'electric' },
          { label: '同比', prop: 'electricGrowth' },
          { label: '工业用煤（万吨）', prop: 'coal' },
          { label: '同比', prop: 'coalGrowth' },
          { label: '工业用气（万立方米）', prop: 'gas' },
          { label: '同比', prop: 'gasGrowth' },
        ]
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  }
}
</script>

<style scoped>

</style>
